<template>
    <div class="common-layout">
        <el-container class="container">
            <!-- 页面左侧 -->
            <el-aside width="200px">
                <!-- 菜单开始 -->
                <img class="img" src="@/assets/logo.png" />
                <el-menu :unique-opened="true" :router="true">
                    <el-menu-item index="/">
                        <template #title>
                            <el-icon><Odometer /></el-icon>
                            <span>仪表盘</span>
                        </template>
                    </el-menu-item>

                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Menu /></el-icon>
                            <span>常用设置</span>
                        </template>
                    <el-menu-item-group>
                        <el-menu-item index="jsgl">教师管理</el-menu-item>
                        <el-menu-item index="xsgl">学生管理</el-menu-item>
                        <el-menu-item index="gggl">公告管理</el-menu-item>
                        <el-menu-item index="xtpz">系统配置</el-menu-item>
                        <el-menu-item index="ptfwq">判题服务器</el-menu-item>
                    </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><Aim /></el-icon>
                            <span>问题</span>
                        </template>
                    <el-menu-item-group>
                        <el-menu-item index="wtlb">问题列表</el-menu-item>
                        <el-menu-item index="zjtm">增加题目</el-menu-item>
                        <el-menu-item index="drdctm">导入导出题目</el-menu-item>
                    </el-menu-item-group>    
                    </el-sub-menu>

                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon><Trophy /></el-icon>
                            <span>比赛&练习</span>
                        </template>
                    <el-menu-item-group>
                        <el-menu-item index="bslb">比赛列表</el-menu-item>
                        <el-menu-item index="cjbs">创建比赛</el-menu-item>
                    </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon><Collection /></el-icon>
                            <span>课程</span>
                        </template>
                    <el-menu-item-group>
                        <el-menu-item index="kclb">课程列表</el-menu-item>
                        <el-menu-item index="cjkc">创建课程</el-menu-item>
                    </el-menu-item-group>
                    </el-sub-menu>

                </el-menu>
            </el-aside>
            <!-- 页面右侧 -->
            <el-container>
                <el-header>
                    
                    <el-dropdown size="large">
                        <span class="el-dropdown-link">
                            username
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>logout</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-icon><share /></el-icon>
                    <el-icon><search /></el-icon>
                </el-header>
                <el-main>
                    <router-view/>
                </el-main>
                <el-footer>
                    <el-footer>Build Version: 20210929bd</el-footer>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>



<script>

import { ElMessage } from 'element-plus'
import { Odometer, Menu, Aim, Trophy, Collection, InfoFilled,Share,Search,ArrowDown } from '@element-plus/icons-vue'
export default {
  name: 'HelloWorld',
  components:{
        ElMessage,
        Odometer,
        Menu,
        Aim, 
        Trophy, 
        Collection, 
        InfoFilled,
        Share,
        Search,
        ArrowDown
  },
  methods:{
  }
}
</script>


<style>

.img{width: 100px;}

.el-aside {
  text-align: center;
}
.el-footer{
    line-height:60px;
}
.el-main {
  line-height: 20px;
  height: 500px;
}
.el-header {
    background-color: #F9FAFC;
}
.el-header > i {
     margin-top: 15px;
     margin-right: 15px;
}
.el-header > .el-dropdown {
    margin-top: 15px;
}
.el-header > .el-dropdown, .el-header > i {
    float: right;
}
.el-dropdown-link {
    font-size: 23px;
    font-weight: bolder;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.el-main, .el-footer  {
    background-color: #EDECEC;
}
</style>
